Skip to content

[radio group] Skip a disabled checked radio for the tab stop - #6193

Open
helloigig wants to merge 2 commits into
mui:masterfrom
helloigig:fix/radio-group-disabled-checked-tab-stop
Open

helloigig wants to merge 2 commits into
mui:masterfrom
helloigig:fix/radio-group-disabled-checked-tab-stop

Conversation

@helloigig

@helloigig helloigig commented Nov 6, 2026 •

Copy link
Copy Markdown

Fixes #6179

When the checked radio in a RadioGroup is disabled, it held the group's single roving tab stop. With nativeButton, a disabled <button> leaves the tab order, so the whole group could not be reached with Tab.

RadioRoot now marks itself as the active composite item only when it is checked and enabled, similar to how TabsTab avoids highlighting a disabled tab. The composite then uses its existing fallback and puts the tab stop on the first enabled radio. The shared composite code is not changed.

Behavior:

  • No radio checked: unchanged
  • Checked and enabled: unchanged, tab stop on the checked radio
  • Checked and disabled: tab stop moves to the first enabled radio
  • Every radio disabled (group not disabled): a single tab stop on the first radio (previously the checked one)
  • readOnly checked radio: keeps the tab stop
  • Group disabled: unchanged, every radio has tabIndex -1
  • Arrow-key navigation and form value: unchanged

Tests include a real Tab-key test with nativeButton.

Note: this reverses the test added in #6022 ("keeps the tab stop on a checked radio that is disabled"). Could a maintainer confirm this is the intended behavior?

Known limitation (also on master): if the checked radio becomes disabled after mount, it keeps the tab stop. Happy to open a follow-up for that.

@pkg-pr-new

pkg-pr-new Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

commit: c175983

@code-infra-dashboard

code-infra-dashboard Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 🔺+4B(0.00%) 🔺+1B(0.00%)

Details of bundle changes

Performance

No regressions in 36 benchmarks · ran 4m 03s · details


Check out the code infra dashboard for more information about this PR.

@netlify

netlify Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit c175983
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6aedc8cf7f6b30fff5a9832e
😎 Deploy Preview https://deploy-preview-6193--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

…ite item

Revert the useCompositeRoot change so the shared composite code is untouched.
RadioRoot now sets the active composite item marker only when the radio is
checked and not disabled, so a disabled checked radio no longer holds the
group's tab stop and the composite falls back to the first enabled radio.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[radio group] A disabled checked radio becomes the only tab stop, so Tab skips the group

1 participant